<script setup lang="ts">

import {onMounted, reactive, ref, watch} from "vue";
import {GameMode, GameOption, MineSweeper, MineMap} from "./sweeper.ts";

const mode =  {
    EASY: {
        num: 10,
        bomb: 10,
        cell: 50,
        name: '青铜',
    },
    NORMAL: {
        num: 16,
        bomb: 40,
        cell: 35,
        name: '白银'
    },
    HARD: {
        num: 30,
        bomb: 80,
        cell: 18,
        name: '黄金'
    },
    EXTREME_INSANE: {
        num: 40,
        bomb: 100,
        cell: 15,
        name: '王者'
    }
}

const mapCanvas = ref<HTMLCanvasElement>()
const bombCanvas = ref<HTMLCanvasElement>()
let map: null | MineMap = null
let minesweeper = ref<null | MineSweeper>(null)
const game = reactive({
    isStart: false,
    bombNumber: 10,
    time: 0,
    difficulty: '青铜',
    formatTime: (time: number) => {
        const hour = Math.floor(time / 3600).toString().padStart(2, '0')
        const minute = Math.floor(time / 60).toString().padStart(2, '0')
        const second = Math.floor(time % 60).toString().padStart(2, '0')
        return `${hour}:${minute}:${second}`
    }
})

const option: GameOption = {
    width: 10,
    height: 10,
    mode: mode.EASY as GameMode,
    offset: [0, 0],
}

let timer: number | null | NodeJS.Timeout = null

onMounted(() => {
    if (!mapCanvas.value || !bombCanvas.value) {
        console.error('canvas元素不存在')
        return
    }
    const parent = mapCanvas.value.parentElement
    if (!parent) {
        console.error('canvas元素的父元素不存在')
        return
    }
    const {width, height} = parent.getBoundingClientRect()
    mapCanvas.value.width = width
    mapCanvas.value.height = height
    bombCanvas.value.width = width
    bombCanvas.value.height = height
    option.width = width
    option.height = height
    option.offset = [Math.floor(width / 2 - option.mode.num * option.mode.cell / 2),
        Math.floor(height / 2 - option.mode.num * option.mode.cell / 2)]
    const mapContext = mapCanvas.value.getContext('2d')
    const bombContext = bombCanvas.value.getContext('2d')
    game.bombNumber = option.mode.bomb
    game.difficulty = option.mode.name
    map = new MineMap(option, mapContext)
    map.draw()
    minesweeper.value = new MineSweeper(option, bombContext)
})


watch(() => [minesweeper.value?.gameStatus], (val: any) => {
    game.isStart = val[0]
    if (!game.isStart) {
        // 游戏结束，停止计时
        clearInterval(timer as number)
    }
}, {deep: true})

const handleGameRestart = () => {
    minesweeper.value?.restart()
    game.isStart = true
    // 重置时间
    game.time = 0
    // 开始计时
    clearInterval(timer as number)
    timer = setInterval(() => {
        game.time++
    }, 1000)
}

const handleGameStart = async () => {
    game.isStart =!game.isStart
    if (game.isStart) {
        minesweeper.value.restart()
        game.time = 0
        // 开始计时
        clearInterval(timer as number)
        timer = setInterval(() => {
            game.time++
        }, 1000)
    }
}

const changeDifficulty = (val: string) => {
    // 游戏已经开始，不允许修改难度
    switch (val) {
        case '青铜':
            option.mode = mode.EASY as GameMode
            break
        case '白银':
            option.mode = mode.NORMAL as GameMode
            break
        case '黄金':
            option.mode = mode.HARD as GameMode
            break
        case '王者':
            option.mode = mode.EXTREME_INSANE as GameMode
            break
    }
    option.offset = [Math.floor(option.width / 2 - option.mode.num * option.mode.cell / 2),
        Math.floor(option.height / 2 - option.mode.num * option.mode.cell / 2)]
    game.bombNumber = option.mode.bomb
    map.draw()
}


</script>

<template>
    <div style="height: 50px; width: 100%; text-align: center; margin-bottom: 8px">
        <el-text tag="b" style="font-size: 35px">扫  雷</el-text>
    </div>
    <el-card style="height: calc(100% - 60px)" body-style="height: calc(100% - 40px)">
        <el-row :gutter="10" style="height: 100%">
            <el-col :span="19">
                <div style="height: 10%; width: 100%; display: flex; justify-content: space-around">
                    <el-text tag="b" style="font-size: 20px">数量：{{ game.bombNumber }}</el-text>
                    <el-text tag="b" style="font-size: 20px">难度：{{ game.difficulty }}</el-text>
                    <el-text tag="b" style="font-size: 20px">时间：{{ game.formatTime(game.time) }}</el-text>
                </div>
                <div style="height: 90%; width: 100%; position:relative;">
                    <!--                    游戏界面区域-->
                    <canvas ref="mapCanvas" class="canvas" style="z-index: 1"/>
                    <canvas ref="bombCanvas" class="canvas" style="z-index: 2"/>
                </div>
            </el-col>
            <el-col :span="5" style="height: 100%">
                <!--                配置区-->
                <el-card style="height: 100%">
                    <el-button
                        style="width: 100%"
                        type="primary" size="large" @click="handleGameStart">
                        {{ game.isStart ? '暂停' : '开始' }}
                    </el-button>
                    <el-button
                        style="width: 100%; margin-top: 10px; margin-left: 0"
                        type="primary" size="large" @click="handleGameRestart">
                        重新开始
                    </el-button>
                    <div style="width: 100%; display: flex; justify-content: space-between; margin-top: 10px;">
                        <el-text style="font-size: 16px">速度</el-text>
                        <el-select v-model="game.difficulty"
                                   style="width: 100px"
                                   :disabled="game.isStart"
                                   @change="changeDifficulty"
                        >
                            <el-option label="青铜" value="青铜"></el-option>
                            <el-option label="白银" value="白银"></el-option>
                            <el-option label="黄金" value="黄金"></el-option>
                            <el-option label="王者" value="王者"></el-option>
                        </el-select>
                    </div>
                    <el-text style="font-size: 25px; width: 100%; text-align: center; display: block">战绩</el-text>
                    <el-table
                        :data="[]"
                        style="width: 100%; height: calc(100% - 100px)"
                        border
                        stripe
                        highlight-current-row
                        :row-style="{color: '#212121'}"
                        :header-cell-style="{color: '#212121'}"
                    >
                        <el-table-column type="selection"/>
                        <el-table-column prop="datetime" label="日期"/>
                        <el-table-column prop="score" label="时间"/>
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
    </el-card>
</template>

<style scoped lang="css">
.canvas {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
</style>